<template>
	<div class="w100 h100 flex-col position-relative">
		<three3d class="three" />
		<div class="flex-col f1 h0">
			<div class="flex m-between">
				<div class="left flex-col p-t-26 p-l-10 p-b-10">
					<my-box title="1#风机">
						<div class="flex-col w100 overflow-y-auto" style="max-height: 580px">
							<div class="flex p-10 s-center m-between pointer" v-for="(item, index) in draughtList1" :key="index">
								<span class="belt">{{ item.draughtName }}</span>
								<span v-if="item.status" class="belt1"
									>{{ item.status == 1 ? '正常' : '停机' }} <span :class="{ start: item.status == 1, stop: item.status == 2 }"></span>
								</span>
								<span v-else class="belt1">{{ item.parameter }}</span>
							</div>
						</div>
					</my-box>
				</div>
				<div class="right flex-col p-t-26 p-r-10 p-b-10">
					<my-box title="2#风机">
						<div class="flex-col w100 overflow-y-auto" style="max-height: 580px">
							<div class="flex p-10 s-center m-between pointer" v-for="(item, index) in draughtList2" :key="index">
								<span class="belt">{{ item.draughtName }}</span>
								<span v-if="item.status" class="belt1"
									>{{ item.status == 1 ? '正常' : '停机' }} <span :class="{ start: item.status == 1, stop: item.status == 2 }"></span>
								</span>
								<span v-else class="belt1">{{ item.parameter }}</span>
							</div>
						</div>
					</my-box>
				</div>
			</div>
			<div class="flex f1 h0 w100 m-between p-b-10">
				<div class="left flex-col p-l-10 h100">
					<my-box class="f1 h0" title="1#风机开关状态">
						<div class="flex-col w100 h100 overflow-y-auto">
							<div class="flex p-10 s-center m-between pointer" v-for="(item, index) in draughtStatus1" :key="index">
								<span class="belt">{{ item.draughtName }}</span>
								<span v-if="item.status" class="belt1"
									>{{ item.status == 1 ? '开到位' : item.status == 2 ? '关到位' : item.status == 3 ? '停机' : '松动拉' }}
									<span :class="{ start: item.status == 1 || item.status == 4, stop: item.status == 2 || item.status == 3 }"></span>
								</span>
							</div>
						</div>
					</my-box>
				</div>
				<div class="w0 f1 m-l-10 m-r-10 center h100">
					<my-table class="h100" :data="state.list" :columns="columns">
						<template #index="{ $index }">
							<span style="color: #fff">{{ $index + 1 }}</span>
						</template>
						<template #beforeTem="{ row }">
							<span style="color: #fff">{{ row.beforeTem }}</span>
						</template>
						<template #afterTem="{ row }">
							<span style="color: #fff">{{ row.afterTem }}</span>
						</template>
						<template #loseTime="{ row }">
							<span style="color: #fff">{{ row.loseTime }}</span>
						</template>
						<template #thisTime="{ row }">
							<span style="color: #fff">{{ row.thisTime }}</span>
						</template>
						<template #allTime="{ row }">
							<span style="color: #fff">{{ row.allTime }}</span>
						</template>
					</my-table>
				</div>
				<div class="right flex-col p-r-10 h100">
					<my-box class="f1 h0" title="2#风机开关状态">
						<div class="flex-col w100 h100 overflow-y-auto">
							<div class="flex p-10 s-center m-between pointer" v-for="(item, index) in draughtStatus2" :key="index">
								<span class="belt">{{ item.draughtName }}</span>
								<span v-if="item.status" class="belt1"
									>{{ item.status == 1 ? '开到位' : item.status == 2 ? '关到位' : item.status == 3 ? '停机' : '松动拉' }}
									<span :class="{ start: item.status == 1 || item.status == 4, stop: item.status == 2 || item.status == 3 }"></span>
								</span>
							</div>
						</div>
					</my-box>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="comprehensive/ventilate">
import three3d from './3d/ventilate.vue'

// 1风机数据
let draughtList1 = ref([
	{ draughtName: '运行状态', status: 1 },
	{ draughtName: '风机负压', parameter: '13.6 Pa' },
	{ draughtName: '风机排风量', parameter: '0 m³/min' },
	{ draughtName: '风速', parameter: '17.1 m/s' },
	{ draughtName: '风叶角度', parameter: '72° %' },
	{ draughtName: '风叶角度比例', parameter: '84%' },
	{ draughtName: '变频器运行频率', parameter: '50 Hz' },
	{ draughtName: '变频器出线电流', parameter: '25.2 A' },
	{ draughtName: '变频器电机转速', parameter: '985 r/min' },
	{ draughtName: '高压电压', parameter: '9.99 KV' },
	{ draughtName: '高压电流', parameter: '45.1 A' },
	{ draughtName: '电网频率', parameter: '50.1 Hz' },
	{ draughtName: '有功功率', parameter: '0 KW' },
	{ draughtName: '无功功率', parameter: '0 KVAR' },
	{ draughtName: '功率因数', parameter: '0.96' },
	{ draughtName: '水平震动', parameter: '0.81 mm/s' },
	{ draughtName: '垂直震动', parameter: '1.92 mm/s' }
])
// 2风机数据
let draughtList2 = ref([
	{ draughtName: '运行状态', status: 2 },
	{ draughtName: '风机负压', parameter: '13.6 Pa' },
	{ draughtName: '风机排风量', parameter: '0 m³/min' },
	{ draughtName: '风速', parameter: '17.1 m/s' },
	{ draughtName: '风叶角度', parameter: '72° %' },
	{ draughtName: '风叶角度比例', parameter: '84%' },
	{ draughtName: '变频器运行频率', parameter: '50 Hz' },
	{ draughtName: '变频器出线电流', parameter: '25.2 A' },
	{ draughtName: '变频器电机转速', parameter: '985 r/min' },
	{ draughtName: '高压电压', parameter: '9.99 KV' },
	{ draughtName: '高压电流', parameter: '45.1 A' },
	{ draughtName: '电网频率', parameter: '50.1 Hz' },
	{ draughtName: '有功功率', parameter: '0 KW' },
	{ draughtName: '无功功率', parameter: '0 KVAR' },
	{ draughtName: '功率因数', parameter: '0.96' },
	{ draughtName: '水平震动', parameter: '0.81 mm/s' },
	{ draughtName: '垂直震动', parameter: '1.92 mm/s' }
])
// 1风机开关状态
let draughtStatus1 = ref([
	{ draughtName: '水平风门', status: 1 },
	{ draughtName: '垂直风门', status: 1 },
	{ draughtName: '电机冷却风扇', status: 1 },
	{ draughtName: '制动器状态', status: 1 },
	{ draughtName: '水平风门', status: 1 },
	{ draughtName: '垂直风门', status: 1 },
	{ draughtName: '电机冷却风扇', status: 1 },
	{ draughtName: '制动器状态', status: 1 },
	{ draughtName: '水平风门', status: 1 },
	{ draughtName: '垂直风门', status: 1 },
	{ draughtName: '电机冷却风扇', status: 1 },
	{ draughtName: '制动器状态', status: 1 },
	{ draughtName: '水平风门', status: 1 },
	{ draughtName: '垂直风门', status: 1 },
	{ draughtName: '电机冷却风扇', status: 1 },
	{ draughtName: '制动器状态', status: 1 }
])
// 2风机开关状态
let draughtStatus2 = ref([
	{ draughtName: '水平风门', status: 1 },
	{ draughtName: '垂直风门', status: 1 },
	{ draughtName: '电机冷却风扇', status: 1 },
	{ draughtName: '制动器状态', status: 1 }
])
// 表格数据
let state = ref({
	total: 0,
	list: [{ beforeTem: 18 }, { beforeTem: 18 }, { beforeTem: 18 }, { beforeTem: 18 }, { beforeTem: 18 }, { beforeTem: 18 }, { beforeTem: 18 }]
})
const columns = [
	{
		prop: 'index',
		label: '编号',
		width: 80
	},
	{
		prop: 'beforeTem',
		label: '前轴温（℃）'
	},
	{
		prop: 'afterTem',
		label: '后轴温（℃）'
	},
	{
		prop: 'loseTime',
		label: '失速开关累计时间（h）'
	},
	{
		prop: 'thisTime',
		label: '本次运行时间（h）'
	},
	{
		prop: 'allTime',
		label: '累计运行时间（h）'
	}
]
</script>

<style lang="scss" scoped>
.left,
.right {
	width: 320px;
	height: 100%;
	background: linear-gradient(90deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
	z-index: 2;
	.belt,
	.belt1 {
		display: inline-block;
		text-align: left;
		font-size: 14px;
		color: #fff;
	}
	.belt1 {
		color: #fff;
		.start,
		.stop {
			display: inline-block;
			margin-left: 3px;
			width: 8px;
			height: 8px;
			opacity: 1;
			background: #45b854;
			border-radius: 50%;
		}
		.stop {
			background: #e76060;
		}
	}
}
.right {
	background: linear-gradient(270deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
}
.center {
	z-index: 2;
	background: linear-gradient(0deg, #0d1018 0%, rgba(13, 16, 24, 0.6) 67%, rgba(13, 16, 24, 0) 100%);
	border: 1px solid rgba(76, 107, 209, 0.5);
}
</style>
